<template>
  <div class="aside">
    <div class="top">
      <img src="@/assets/logo.png" style="width: 60px" />
      <span class="logo-title">后台管理系统</span>
      <!-- <div></div> -->
    </div>
    <!-- <h1>{{title}}</h1> -->
    <div class="menu">
      <el-menu
        :default-active="Route.path"
        active-text-color="#ffd04b"
        background-color="#545c64"
        text-color="#fff"
        class="el-menu"
        :collapse="data"
        @open="handleOpen"
        @close="handleClose"
        router
      >
        <el-menu-item index="/welcome" route="welcome">
          <el-icon><House /></el-icon>
          <template #title>首页</template>
        </el-menu-item>

        <el-menu-item index="/orders" route="orders">
          <el-icon><Tickets /></el-icon>
          <template #title>订单管理</template>
        </el-menu-item>

        <el-sub-menu index="/file">
          <template #title>
            <el-icon><Management /></el-icon>
            <span>文件管理</span>
          </template>
          <!-- <el-menu-item-group title="Group One"> -->
          <el-menu-item index="/file"
            ><el-icon><Files /></el-icon>文件操作</el-menu-item
          >
          <el-menu-item index="/recycleBin"
            ><el-icon><Box /></el-icon>回收站</el-menu-item
          >
        </el-sub-menu>
        <el-menu-item index="/user" route="user">
          <el-icon><Avatar /></el-icon>
          <template #title>用户管理</template>
        </el-menu-item>
        <el-menu-item index="/notice" route="notice">
          <el-icon><Notification /></el-icon>
          <template #title>通知公告</template>
        </el-menu-item>
        <el-menu-item index="/logs" route="logs">
          <el-icon><List /></el-icon>
          <template #title>系统日志</template>
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";
const Route = useRoute();

// import {Avatar} from "@element-plus/icons-vue";
// import router from "../../router"
// import router from "../../router"
// const isCollapse = ref(false)
// const gg = ref()
const props = defineProps({
  data: {
    type: Boolean,
    default: false,
  },
});
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
};
</script>

<style scoped>
.aside {
  width: 200px;
  height: 100%;
  /* background-color: #f5f5f5; */
  /* display: flex;
    justify-content: center;
    align-items: center; */
}
.top {
  width: 200px;
  height: 60px;
  /* background-color: blue; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.logo-title {
  color: white;
  font-size: 22px;
  line-height: 60px;
}
.menu {
  width: 200px;
  height: calc(100% - 60px);
  /* background-color: #f5f5f5; */
}
/* 全局 解决el-menu边缘不对齐问题 */
.el-menu {
  border: none !important;
}
</style>